<template>
  <div id="box">
    <div id="tou">
      <img
        src="https://img.youpin.mi-img.com/jianyu/ab4ba0e9_2071_4360_a0f8_9886a36fd8e6.png@base@tag=imgScale&h=98&m=1&q=80&w=750"
        alt
      />
    </div>
    <div id="zhong" v-for="book in books" :key="book.id" @click="fn1(book.id)">
      <div id="yi">
        <div id="yii">
          <div id="zuo">
            <img
              :src="book.img"
              alt
            />
            <!-- 大图 -->
          </div>
          <div id="you">
            <div id="a">{{book.name}}</div>
            <div id="b">{{book.xiaoname}}</div>
            <div id="duo">
              <div id="c">
                  <img :src="book.xinimg" alt="" v-if="book.xinimg">
                  <!-- 新品 -->
              </div>
              <div id="d">
                  <img :src="book.zheshangzhe" alt="" v-if="book.zheshangzhe">
                  <!-- 折上折 -->
              </div>
              <div id="e">
                  <img :src="book.shenghuo" alt="" v-if="book.shenghuo">
                  <!-- 生活优选 -->
              </div>
              <div id="f" :style="book.shap">{{book.sha}}</div>
              <div id="g" :style="book.haop">{{book.haoping}}</div>
            </div>
            <div id="wei">
              <div id="h">
                <div id="i">￥{{book.price}}</div>
                <div id="j">{{book.type}}</div>
              </div>
              <div id="k">
                <img
                  src="https://img.youpin.mi-img.com/jianyu/137a0acf_5aa4_44ab_84e6_dcf1997f0c9e.png"
                  alt
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import getlink from "../../../../api/apiserver"
export default {
data(){
    return{
        id:0,
        books:[]
    }
},
mounted(){
    getlink("http://localhost:3000/lunbotu2").then((ok)=>{
        this.books=ok.data;
    })
},
methods: {
  fn1(id){
  this.$router.push({path:'/gwc',query:{id:id}})
  }
}
};
</script>

<style scoped>
#box {
  width: 100%;
}
#tou {
  width: 100%;
  height: 0.82rem;
  margin-top: 10px;
}
#tou img {
  width: 100%;
  height: 100%;
}
#zhong {
  width: 95%;
  margin: auto;
  background-color: aliceblue;
  border-radius: 0.1rem;
}
#yi {
  width: 100%;
  height: 1.5rem;
  display: flex;
  justify-content: center;
  margin-bottom: 0.1rem;
}
#yii {
  width: 92%;
  height: 87%;
  align-self: center;
  display: flex;
  justify-content: space-between;
}
#zuo {
  width: 1.305rem;
  height: 100%;
}
#zuo img {
  width: 100%;
  height: 100%;
}
#you {
  width: 2rem;
  height: 100%;
}
#a {
    width: 100%;
    height: 0.24rem;
    font-size: 4vw;
    line-height: 0.24rem;
    text-overflow: ellipsis;
}
#b{
    width: 100%;
    height: 0.17rem;
    font-size: 3.2vw;
    line-height: 0.17rem;
    text-overflow: ellipsis;
    margin-top: 0.03rem;
}
#duo{
    width: 100%;
    height: 0.18rem;
    display: flex;
     margin-top: 0.04rem;
}
#c{
    margin-left: 0.07rem; 
    align-self: center;
}
#c img{
    width: .3rem;
    height: .17rem;
}
#d{
     margin-left: 0.07rem; 
    align-self: center;
}
#d img {
  width: 0.78rem;
  height: 0.16rem;
}
#e{
     margin-left: 0.07rem; 
    align-self: center;
}
#e img{
    width: .52rem;
    height: .16rem;
}
#f{
    width: .56rem;
    height: .17rem;
     margin-left: 0.07rem; 
    align-self: center;
    font-size: 2.9333vw;
    text-align: center;
    line-height: .17rem
}
#g{
    width: .75rem;
    height: .17rem;
    font-size: 2.6667vw;
      margin-left: 0.07rem; 
    align-self: center;
     text-align: center;
    line-height: .17rem
}
#wei{
    width: 100%;
    height: 0.28rem;
    display: flex;
    justify-content: space-between;
    margin-top: 0.3rem;
}
#h{
    display: flex;
}
#i{
    font-size: 4.8vw;
    color: rgb(242, 29, 29);
}
#j{
    color: rgb(153, 153, 153);
    margin-left: 0.5333vw;
    text-decoration: line-through;
    margin-top: 0.06rem;
}
#k{
    width: 0.28rem;
    height: 0.28rem;
    background-color: rgb(242, 29, 29);
    border-radius: .3rem;
}
#k img{
    width: 100%;
    height: 100%;
}
</style>
